<template>
  <div :id="chartId" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PictorialBarChart',
  props: {
    // 图表容器属性
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '400px'
    },
    // 数据属性
    xAxisData: {
      type: Array,
      default: () => []
    },
    chartData: {
      type: Array,
      default: () => []
    },
    // 自定义配置
    backgroundColor: {
      type: String,
      default: '#031d33'
    }
  },
  data() {
    return {
      chartId: `water-level-chart-${Date.now()}`, // 唯一ID
      chart: null
    }
  },
  computed: {
    // 图表配置项
    chartOption() {
      let maxValue = Math.ceil(Math.max(...this.chartData) * 1.5)
      if (maxValue == 0) {
        maxValue = 30
      }
      return {
        backgroundColor: this.backgroundColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '0%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B2B8C3',
            fontSize: 10,
            // interval: 0,
            // rotate: 45,    // 旋转角度
            // margin: 10     // 调整标签与轴线距离
            align: 'center',  // 文字对齐方式
            verticalAlign: 'top', // 垂直对齐方式
            margin: 8
          }
        },
        yAxis: {
          type: 'value',
          max: maxValue,
          inverse: true,
          axisLabel: {
            color: '#B2B8C3',
            fontSize: 12,
            interval: 0
          },
          axisTick: {
            show: false // 隐藏刻度线
          },
          splitLine: {  // y轴网格线
            show: true,
            lineStyle: {
              type: 'dashed',    // 虚线类型
              color: '#666666',  // 线条颜色
              width: 0.5,          // 线条宽度
              dashOffset: 2      // 虚线偏移量
            }
          },
        },
        series: [
          {
            data: new Array(this.xAxisData.length).fill(maxValue),
            type: "pictorialBar",
            emphasis: {
              focus: "series"
            },
            tooltip: {
              show: false
            },
            barWidth: '30%',
            silent: true,
            itemStyle: {
              color: 'rgba(56,73,184,0.4)',
              borderWidth: 1,
              borderColor: "#428bff"
            },
            symbol: 'rect'
          },
          {
            type: 'pictorialBar',
            label: {
              show: false,
              position: 'right',
              offset: [10, 0],
              fontSize: 16
            },
            symbolRepeat: true,
            symbolSize: ['80%', '35%'],
            barCategoryGap: '40%',
            barWidth: '30%',
            itemStyle: {
              color: 'rgb(35,173,253)'
            },
            data: this.chartData,
            symbol: 'rect'
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.handleResize)
    // 销毁图表实例
    this.chart && this.chart.dispose()
  },
  watch: {
    // 监听数据变化
    chartData: {
      handler(newVal) {
        this.updateChart()
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId))
      this.updateChart()
    },
    updateChart() {
      this.chart && this.chart.setOption(this.chartOption)
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  }
}
</script>